/* Revealing 3D Menu CSS */

/* aspecto de la pagina principal */

#menu{

    height: auto;
    width:260px;
    float:left;
    -webkit-border-radius: 0 20 20 0;  
    box-shadow: 5px -5px 10px 5px rgba(0,0,0,0.2);
    
}


nav
{

    border-radius: 0 20 20 0;   
    -moz-border-radius: 0 20 20 0;  
    -webkit-border-radius: 0 20 20 0;  
   /*    position: fixed;
        left: -16em;*/
    /*    top: 0;
        bottom: 0;*/
    background-color: #43648D;
    border-right: 0px solid #9DB3BB;
    box-shadow: 4px 0 5px rgba(0,0,0,0.2);
    z-index: 1;
    cursor: pointer;
}

/*nav:after
{
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    right: -70px;
    top: 50%;
    border-width: 15px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #9DB3BB;
}*/

nav ul
{
    width: 14em;
    list-style-type: none;
    margin: 0;
    padding: 1em;
}
/* el color de la letra                               importante       */
nav a:link, nav a:visited
{
    display: block;
    width: 100%;
    font-weight: bold;
    line-height: 2.5em;
    text-indent: 10px;
    text-decoration: none;
    color: #D5D5D3;
    border-radius: 8px;
    outline: 0 none;
}

/*la sombra del menu como boton*/
nav a:hover, nav a:focus
{
    color: #fff;
    background-color: #405872;
    text-shadow: 0 0 40px white;
    box-shadow: inset 0 2px 2px rgba(0,1,1,20);
}
/*
     hovering 
    article, article:after, nav, nav *
    {
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }*/
/*
nav:hover
{
    left: 0;
}*/
/*
nav:hover ~ article
{
    -webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
    -o-transform: translateX(16em) perspective(600px) rotateY(10deg);
    transform: translateX(16em) perspective(600px) rotateY(10deg);
}*/
/*
nav:hover ~ article:after
{
    left: 60%;
}*/

/* typography */
/*footer
{
    margin-top: 2em;
    border-top: 1px dotted #999;
}*/

/*h1
{
    font-size: 1.5em;
    font-weight: normal;
    margin: 0 0 0.2em 0;
    border-bottom: 1px solid #555;
}

p
{
    line-height: 1.3em;
    margin: 0 0 1.5m 0;
}*/